<template>
	<view class="previewImage" @tap="close" >
				<movable-area class="marea" scale-area>
					<movable-view
						class="mview"
						direction="all"
						:out-of-bounds="false"
						:inertia="false"
						damping="50"
						friction="2"
						scale="true"
						scale-min="1"
						scale-max="4"
						animation="false"
						:scale-value="scale"
					>
						<image class="image" :src="imgs" mode="widthFix"/>
					</movable-view>
				</movable-area>
				<view v-if="changeIsShow" class="change-img" @click="chooseImg">更换图片</view>
	</view>
	
</template>

<script>
export default {
	name: 'ksj-previewImage', //插件名称
	props: {
		imgs: {
			//图片列表
			type: String,
			required: true,
			default: '',
		},

		changeIsShow: {type: Boolean, default: true}
	},
	data() {
		return {
			swiper:false,//是否禁用
			show: false, //显示状态
			index: 0, //当前页
			deg: 0, //旋转角度
			time: 0, //定时器
			interval: 1000, //长按事件
			scale: 1 ,//缩放比例
			timer: null,
		};
	},
	methods: {
		chooseImg () {
			this.$emit('chooseImg')
		},
		
		//旋转
		rotate(e) {
			this.deg = this.deg == 270 ? 0 : this.deg + 90;
		},
		close () {

			let that = this

			if(this.timer) {
				clearTimeout(this.timer)
				this.timer = null
			};
			this.timer = setTimeout(()=>{
					that.$emit('enlargeClose')
			}, 300);

		}
	}
};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
.previewImage {
	z-index: 25;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
	user-select: none;
	.marea {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
		.mview {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: auto;
			min-height: 100%;
			.image {
				width: 100%;
			}
		}
	}
	
	.rotate {
		position: absolute;
		right: 10rpx;
		width: 120rpx;
		height: 56rpx;
		bottom: 10rpx;
		text-align: center;
		padding: 10rpx;
		.text {
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 30rpx;
			border-radius: 20rpx;
			border: 1rpx solid #f1f1f1;
			padding: 6rpx 22rpx;
			user-select: none;
		}
		.text:active {
			background-color: rgba(100, 100, 100, 0.5);
		}
	}

}
.change-img {
		position: fixed;
		width: 300rpx;
		bottom:5%;
		left: 50%;
		margin-left: -150rpx;
		text-align: center;
		z-index: 30;
		color:#fff;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #3981FF;
		border-radius: 10rpx;
	}
</style>
